<template>
  <view
    class="panda-container"
    :style="{ backgroundImage: `url(${oss2('others/panda2022/bg.png')})` }"
  >
    <view class="back-home" @click.stop="backHome">返回首页</view>
    <image class="w-375px h-346px" :src="oss2('panda/p_1.png')" />
    <image class="w-375px h-86px mt-40px" :src="oss2('panda/title_1.png')" />
    <view
      class="w-375px h-216px cover -mt-16px"
      :style="{
        backgroundImage: `url(${oss2('panda/wait_box.png')})`,
        backgroundSize: '778rpx',
      }"
    >
      <video
        class="w-314px h-176px mx-auto block"
        style="transform: translate(0, 43rpx)"
        :src="oss2('panda/panda_video_index.mp4')"
        @play="videoPlay"
      />
    </view>
    <image class="w-375px h-132px mt-24px" :src="oss2('panda/title_2.png')" />
    <image
      class="w-375px h-500px -mt-43px"
      :src="oss2('others/panda2022/pic_gift.png')"
    />
    <view class="text-right action -mt-21px mb-19px">
      <image
        class="w-158px h-50px mx-auto"
        :src="oss2('panda/btn_play.png')"
        @click.stop="handleJoin"
      />
    </view>
    <image class="w-375px h-86px" :src="oss2('panda/title_3.png')" />
    <view class="w-375px h-379px cover -mt-24px" style="position: relative">
      <image
        class="w-375px h-379px"
        :src="oss2('panda/banner_box.png')"
        style="position: absolute; top: 0; left: 0; z-index: 2"
      />
      <image
        class="w-346px h-300px mx-auto"
        style="transform: translate(0, 84rpx)"
        :src="oss2('panda/banner.png')"
      />
    </view>
    <image
      class="w-158px h-50px mx-auto -mt-14px"
      :src="oss2('panda/btn_star.png')"
      @click.stop="linkToDetail"
    />
  </view>
</template>

<script setup>
import { oss2 } from "@/utils/utils";
import { onLoad, onShow, onUnload, onHide } from "@dcloudio/uni-app";

let enterTime = "";
let outTime = "";
let stayTime = "";

onLoad(async (options) => {
  // toOnPack()
});

onShow(() => {
  // 用户进入时间
  enterTime = new Date();
  getApp().accessLogAdd();
});

onHide(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz2(
    "track",
    "event",
    "pandas_campaign_landpage",
    "view",
    "campaign_landpage",
    stayTime
  );
});

onUnload(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime?.getTime() - enterTime?.getTime()) / 1000;
  getApp().emdlz2(
    "track",
    "event",
    "pandas_campaign_landpage",
    "view",
    "campaign_landpage",
    stayTime
  );
});

const toOnPack = async () => {
  uni.navigateTo({
    url: `/pages/custom-page/index`,
  });
};

const linkToDetail = () => {
  getApp().emdlz2(
    "track",
    "event",
    "pandas_campaign_landpage",
    "click",
    `enjoy_immediately_${"btn_star"}`,
    ""
  );

  uni.navigateTo({
    url: "/campaign/pages/panda/detail",
  });
};

const handleJoin = () => {
  getApp().emdlz2(
    "track",
    "event",
    "pandas_campaign_landpage",
    "click",
    "join_immediately",
    ""
  );
  toOnPack();
};

const videoPlay = () => {
  getApp().emdlz2(
    "track",
    "event",
    "pandas_campaign_landpage",
    "click",
    `vedio_playback_${"panda_video_index"}`,
    ""
  );
};

const backHome = () => {
  getApp().emdlz2(
    "track",
    "event",
    "pandas_campaign_landpage",
    "click",
    "return_homepage",
    ""
  );
  uni.switchTab({
    url: "/pages/home/home",
  });
};
</script>

<style lang="less" scoped>
.panda-container {
  width: 100%;
  min-height: 100vh;
  height: 3748rpx;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 375px 100%;
  padding: 28px 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
  image {
    display: block;
  }
}
.back-home {
  width: 68px;
  height: 23px;
  line-height: 23px;
  border-radius: 0 6px 6px 0;
  position: fixed;
  z-index: 9;
  left: 0;
  top: 16px;
  color: white;
  font-size: 11px;
  text-align: center;
  //background: linear-gradient(top bottom, #8FC31E, #47B134);
  background: linear-gradient(to bottom, #8fc31e, #47b134);
}
.gift-box {
  position: relative;
  margin-bottom: 30px;
  .action {
    width: 100%;
    position: absolute;
    bottom: -10px;
    left: 0;
  }
}
</style>
